<%--
  Created by IntelliJ IDEA.
  User: MAVI003
  Date: 2017/3/20
  Time: 9:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>拍卖系统用户注册</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icon.jpg">
    <link rel="bookmark" href="${pageContext.request.contextPath}/images/icon.jpg">

    <link href="//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/css/builder/v3/layoutit.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/layoutit.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/my.css" rel="stylesheet">
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript"
            src="http://cdn.staticfile.org/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/js/jquery.htmlClean.js"></script>
    <script type="text/javascript"
            src="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/js/builder/v3/scripts.min.js"></script>

    <link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="http://hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css"/>
    <script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script>
    <script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script>
    <style type="text/css">
        body {
            background-image: url(${pageContext.request.contextPath}/images/7.jpg);
            background-size: cover;
        }

        .myback {
            background-image: url(${pageContext.request.contextPath}/images/7.jpg);
            background-size: cover;
        }
    </style>
    <script>
        function checkPasswords() {
            var passl = document.getElementById("upassword");
            var pass2 = document.getElementById("repassword");
            if (passl.value != pass2.value)
                passl.setCustomValidity("两次密码必须输入一致！");
            else
                passl.setCustomValidity('');
        }


        $(document).ready(function () {
            $("#uname").change(
                    function () {
                        var uname = document.getElementById("uname");
                        var flag = false;
                        $.ajax({
                            type: 'get',
                            url: '${pageContext.request.contextPath}/checkUname',
                            async: false,
                            data: {
                                uname: uname.value,
                            },
                            dataType: 'text',
                            success: function (data) {

                                if (data == 0) {

                                    flag = true;
                                } else {
                                    flag = false;
                                }

                            },
                            error: function () {
                                flag = false;

                            }
                        });

                        if (flag == false) {

                            uname.setCustomValidity("用户名已存在！");
                        }
                        else {

                            uname.setCustomValidity('');
                        }


                    }
            )
        })

    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 myback">
        </div>
        <div class="col-md-6 myback">
            <div class="page-header">
                <h1>
                    拍卖系统用户注册
                </h1>
            </div>
            <h4>已有账号？去<a href="${pageContext.request.contextPath}/showLogin">登录</a>！</h4>

        </div>


    </div>
    <div class="row clearfix hideLine">
        <div class="col-md-12 column hideLine myback">

            <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/reg">
                <div class="form-group">
                    <label for="uname" class="col-sm-2 control-label">用&nbsp;户&nbsp;&nbsp;名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="uname" name="uname" placeholder="请输入用户名" required
                               pattern="^[A-Za-z][A-Za-z1-9_-]+$"
                               title="用户名格式：字母开头 + 数字/字母/下划线"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="upassword" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="upassword" name="upassword" placeholder="请输入密码"
                               required pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$"
                               title="密码格式：6-21字母和数字组成" onchange="checkPasswords()"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="repassword" class="col-sm-2 control-label">重复密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码" required
                               name="repassword" onchange="checkPasswords()"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="utel" class="col-sm-2 control-label">手机号码</label>
                    <div class="col-sm-6">
                        <input type="tel" class="form-control input-xlarge" id="utel" placeholder="请输入手机号码" name="utel"
                               required pattern="^1(3|4|5|7|8)[0-9]\d{8}$"
                               title="手机号码格式：11位数字"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="urealname" class="col-sm-2 control-label">真实姓名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="urealname" name="urealname" placeholder="请填写真实姓名"
                               required pattern="^[\u0391-\uFFE5]+$"
                               title="姓名格式：一个或多个汉字"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                    <div class="col-sm-6">
                        <%--<input type="text" class="form-control" id="usex" name="usex"/>--%>
                        <label class="radio">
                            <input type="radio" value="1" name="usex" checked="checked">
                            男
                        </label>
                        <label class="radio">
                            <input type="radio" value="0" name="usex">
                            女
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="uaddress" class="col-sm-2 control-label">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                    <div class="col-sm-6">
                        <div id="distpicker">
                            <div class="form-group">
                                <div style="position: relative;">
                                    <input id="city-picker3" class="form-control" readonly type="text"
                                           value="宁夏回族自治区/石嘴山市/大武口区" data-toggle="city-picker" name="uarea">
                                </div>
                            </div>
                        </div>
                        <textarea class="form-control" id="uaddress" name="uaddress" required
                                  placeholder="请填写详细地址"></textarea>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-3" align="center">
                            <br/>
                            <button type="submit" class="btn btn-default">注册</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
